<template>
  <div class="task-done">
    <header-bar title="已办任务">
    </header-bar>
    <section class="main" @touchmove="handleTouchmove">
      <tab :line-width="2" active-color='#fc378c' v-model="tabIndex">
        <tab-item>个人已办</tab-item>
        <tab-item>部门已办</tab-item>
      </tab>
      <swiper v-model="tabIndex" :height="swiperHeight" :show-dots="false">
        <swiper-item>
          <scroll :data="scrollData" style="width: 100%;height: 100%;">
            <ul class="document-list">
              <router-link :to="{name: 'taskDetail'}"
                v-for="(document, index) in documents"
                :key="index"
                >
                <li class="document-item">
                  <div class="item-line"></div>
                  <div class="title-wrapper">
                    <h3 class="title">{{document.title}}</h3>
                    <div class="desc">
                      <div class="author">下发人: {{document.author}}</div>
                      <div class="datetime">{{document.datetime}}</div>
                    </div>
                  </div>
                </li>
              </router-link>
            </ul>
          </scroll>
        </swiper-item>
        <swiper-item>
          <scroll :data="scrollData" style="width: 100%;height: 100%;">
            <ul class="document-list">
              <router-link :to="{name: 'taskDetail'}"
                v-for="(document, index) in documents"
                :key="index">
                <li class="document-item">
                  <div class="item-line"></div>
                  <div class="title-wrapper">
                    <h3 class="title">{{document.title}}</h3>
                    <div class="desc">
                      <div class="author">下发人: {{document.author}}</div>
                      <div class="datetime">{{document.datetime}}</div>
                    </div>
                  </div>
                </li>
              </router-link>
            </ul>
          </scroll>
        </swiper-item>
      </swiper>
    </section>
    <transition name="slide">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
  
</template>

<script>
  import {Tab, TabItem, Swiper, SwiperItem} from 'vux'
  import HeaderBar from '@/components/HeaderBar'
  import Scroll from '@/components/Scroll'
  import {documents} from '@/data/documents'

  export default{
    data(){
      return {
        tabIndex: 0,
        scrollData: [1],
        documents
      }
    },
    components: {
      HeaderBar,
      Scroll,
      Tab, 
      TabItem, 
      Swiper,
      SwiperItem
    },
    methods: {
      handleTouchmove(){
        console.log('touchmove')
      }
    },
    computed: {
      swiperHeight(){
        const vh = window.document.body.offsetHeight
        console.log(vh)
        return `${vh - 98}px`
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';
  @import '~@/styles/mixin.less';

  .task-done{
    .main{
      position: absolute;
      top: @height-header-bar;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #e6e6e6;
      .scroll{
        width: 100%;
        height: 100%;
      }

      .document-list{
        margin-top: 0.18rem;
        .document-item{
          display: flex;
          position: relative;
          background-color: #fff;
          height: 1.6rem;
          padding: 0.3rem 0.34rem;
          .item-line{
            width: 10px;
            background-color: @color-theme-blue-medium;
          }
          .title-wrapper{
            width: 7.2rem;
            position: relative;
            padding-left: 0.26rem;
            .title{
              color: #2d2d2d;
              font-size: 0.34rem;
              font-weight: normal;
            }
            .desc{
              display: flex;
              justify-content: space-between;
              font-size: 0.28rem;
              color: #989898;
            }
            .badge{
              position: absolute;
              top: 0rem;
              right: 0.36rem;
              padding:0.04rem;
              font-size: 0.24rem;
              color: red;
              border: 1px solid #d12114;
              border-radius: 0.1rem;
            }
          }
          .border-1px(#d9d9d9)
        }
        
      }
    }
    .child-view{
      position: fixed;
      top:0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .slide-enter-active, .slide-leave-active{
      transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    .slide-enter, .slide-leave-active{
      transform: translate3d(100%, 0, 0);
    }
  }
</style>